<!DOCTYPE html>
<html>
<head >
    <meta charset="UTF-8">
    <link href="css/bootstrap3.3.min.css" rel="stylesheet">
    <link href="css/x9-validate.css" rel="stylesheet">
    <title>表单验证</title>
</head>
<body style="background: #eee;">
	<div class="container">
		<div class="row " style="margin-top:50px">
			<h1 class="text-success">表单验证<small>&nbsp;&nbsp;只需要在input中添加一个x9-validate属性即可，支持多重校验</small></h1>
		</div>
		<form id="form">
			<div class="row margin-top-20">
				<div class="col-sm-2">
					<div class="label-input-lg">校验必填：</div>
				</div>
				<div class="col-sm-10 ">
					<input type="text" class="col-sm-6 input-lg" x9-validate="required" placeholder="此项为必填项"/>
				</div>
			</div>
			<div class="row margin-top-20">
				<div class="col-sm-2">
					<div class="label-input-lg">校验长短：</div>
				</div>
				<div class="col-sm-10">
					<input type="text" class="col-sm-6 input-lg" x9-validate="length[6-16]" placeholder="输入字符在6~16个字符之间"/>
				</div>
			</div>
			<div class="row margin-top-20">
				<div class="col-sm-2">
					<div class="label-input-lg">校验邮箱：</div>
				</div>
				<div class="col-sm-10">
					<input type="text" class="col-sm-6 input-lg" x9-validate="email" placeholder="这里只能输入的必须是邮箱格式"/>
				</div>
			</div>
			<div class="row margin-top-20">
				<div class="col-sm-2">
					<div class="label-input-lg">校验整数：</div>
				</div>
				<div class="col-sm-10">
					<input type="text" class="col-sm-6 input-lg" x9-validate="integer" placeholder="此处只能输入数字"/>
				</div>
			</div>
			<div class="row margin-top-20">
				<div class="col-sm-2">
					<div class="label-input-lg">校验电话号码：</div>
				</div>
				<div class="col-sm-10">
					<input type="text" class="col-sm-6 input-lg" x9-validate="phone" placeholder="输入电话号码"/>
				</div>
			</div>

			<div class="row margin-top-20">
				<div class="col-sm-2">
					<div class="label-input-lg">汉字：</div>
				</div>
				<div class="col-sm-10">
					<input type="text" class="col-sm-6 input-lg" x9-validate="CN" placeholder="只能输入汉字"/>
				</div>
			</div>

			<div class="row margin-top-20">
				<div class="col-sm-2">
					<div class="label-input-lg">身份证：</div>
				</div>
				<div class="col-sm-10">
					<input type="text" class="col-sm-6 input-lg" x9-validate="card" placeholder="只能输入身份证"/>
				</div>
			</div>

			<div class="row margin-top-20">
				<div class="col-sm-2">
					<div class="label-input-lg">url：</div>
				</div>
				<div class="col-sm-10">
					<input type="text" class="col-sm-6 input-lg" x9-validate="url" placeholder="只能输入网址" value="http://"/>
				</div>
			</div>

			<div class="row margin-top-20">
				<div class="col-sm-2">
					<div class="label-input-lg">密码：</div>
				</div>
				<div class="col-sm-10">
					<input type="text" class="col-sm-6 input-lg" x9-validate="required,min[6]" id="repwd" placeholder="密码" />
				</div>
			</div>

			<div class="row margin-top-20">
				<div class="col-sm-2">
					<div class="label-input-lg">确认密码：</div>
				</div>
				<div class="col-sm-10">
					<input type="text" class="col-sm-6 input-lg" x9-validate="required,repwd" placeholder="确认密码" />
				</div>
			</div>

			<div class="row margin-top-20">
				<div class="col-sm-2">
					<div class="label-input-lg">多重校验：</div>
				</div>
				<div class="col-sm-10">
					<input type="text" class="col-sm-6 input-lg" x9-validate="required,email,max[16]" placeholder="必填，邮箱，10-16个字符"/>
				</div>
			</div>

			<div class="row margin-top-20">
				<div class="col-sm-2">

				</div>
				<div class="col-sm-2">
					<button class="btn btn-success btn-block" type="submit">提交</button>
				</div>
                <div class="col-sm-2">
                    <button class="btn btn-danger btn-block" type="reset">重置</button>
                </div>
			</div>
            <br/>
		</form>
	</div>
</body>

<script src="js/jquery-2.1.3.min.js" type="application/javascript"></script>
<script src="js/x9-validate.js" type="application/javascript"></script>
<script>
$(':submit').click(function(e){
    $result = $('#form').x9Validate();
    if($result){
    	alert('牛逼，全验证过了！那么好，皮皮虎，我们走！');
    }else{
    	alert('你这恐怕不行吧，有没验证过的字段。');
    	$('body').scrollTop(0);
    	return false;
    }

})
</script>
</html>